{% extends "base.html" %}
{% load i18n %}
{% block head %}
	<title>{%trans "校园帮帮团" %}</title>
	{{ block.super }}
{% endblock %}

{% block content %}
    <div class="page-content" style="min-width:80%;">
        <!--HTML-->
        <div id="chart4_demo1" style="float:left; height:400px; width:50%;padding:10px;"></div>
        <div id="chart3_demo" style="float:right; height:400px; width:50%;padding:10px;"></div>
        <!--JS-->
        <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
        <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
        <script type="text/javascript">
        function createEStandLineChart(conf){
            var myChart = echarts.init(document.getElementById(conf.selector));
            var legendData = []
            for(var i=0; i < conf.data.series.length;i++){
                legendData.push(conf.data.series[i].name)
            }
            myChart.setOption({
                title : {
                    show: true, //显示标题
                    text: '             近七日平台活跃度', //主标题
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    y: 'bottom',
                    data:legendData
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: false},
                        dataView : {show: false, readOnly: true},
                        magicType : {show: true, type: ['bar','line']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        data : conf.data.xAxis
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitArea : {show : true}
                    }
                ],
                series : conf.data.series
            });
         }
        function initEStandLineChart(conf){
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function(res){
                    //获取数据成功
                    if (res.result){
                        createEStandLineChart({
                            selector: conf.containerId, // 图表容器
                            data: res.data, // 图表数据
                        });
                    }
                }
            })
        }
        $(function(){
            initEStandLineChart({
                url: '{{ SITE_URL }}get_chart/',
                dataType: 'json',
                containerId: 'chart3_demo'
            });
        });
        //chart3_demo_js_end
        </script>


        <script type="text/javascript">
            //chart4_demo1_js_start
            function createEPieChart(conf){
                var myChart = echarts.init(document.getElementById(conf.selector));
                var aLegend = [];
                var series = conf.data.series;
                for (var i = 0; i < series.length; i++) {
                     aLegend[i] = series[i].name;
                };
                // 填入数据
                myChart.setOption({
                    title : {
                        text: conf.data.title,
                        subtext: '',
                        x:'center'
                    },
                    legend: {
                        x : 'center',
                        y: 'bottom',
                        data: aLegend
                    },
                    tooltip : {
                        trigger: 'item',
                        x : 'left',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    toolbox: {
                        show : true,
                        x : 'left',
                        feature : {
                            mark : {show: false},
                            dataView : {show: false, readOnly: true},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'left',
                                        max: 1548
                                    }
                                }
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series: [{
                        // 根据名字对应到相应的系列
                        name:'任务组成',
                        type:'pie',
                        data: series,
                    }]
                });
            }

            function initEPieChart(conf){
                $.ajax({
                    url: conf.url,
                    type: 'GET',
                    dataType: conf.dataType,
                    success: function(res){
                        //获取数据成功
                        if (res.result){
                            var data = res.data;
                            createEPieChart({
                                selector: conf.containerId, // 图表容器
                                data: data, // 图表数据
                            });
                        }
                    }
                });
            }
            $(function(){
            initEPieChart({
                url: '{{ SITE_URL }}get_pie/',
                dataType: 'json',
                containerId: 'chart4_demo1'
            });
        });
            //chart4_demo1_js_end
        </script>
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab">
                <a role="button" data-toggle="collapse" href="#panel-content2" class="panel-icon panel-spread"
                   aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content2" class="panel-title"
                    aria-expanded="true">跑腿任务</h3>
            </div>
            <div id="panel-content2" class="panel-body panel-collapse p0 collapse in" aria-expanded="true" style="">
                <table id="offline_mission" class="bk-table bk-table-header-bordered">
                    <thead>
                    <tr>
                        <th>发布人</th>
                        <th>发布日期</th>
                        <th>任务类型</th>
                        <th>任务详情</th>
                        <th>截止日期</th>
                        <th>任务酬劳</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_block %}
<script>
   var language = {
            search: "{% trans '搜索：' %}",
            lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
            zeroRecords: "{% trans '没找到相应的数据！' %}",
            info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
            infoEmpty: "{% trans '暂无数据！' %}",
            infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
            paginate: {
                first: "{% trans '首页' %}",
                last: "{% trans '尾页' %}",
                previous: "{% trans '上一页' %}",
                next: "{% trans '下一页' %}",
            }
        }

   var offlineMissionTable = $('#offline_mission').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',
        //这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: true, //隐藏分页
        ordering: false, //关闭排序
        info: false, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{SITE_URL}}get_offline_mission_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.draw = json.data.info.draw;
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data

                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "belonging_user",
            },
            {
                targets: 1,
                data: "create_time",
            },
            {
                targets: 2,
                data: "mission_type", className: "text-center",
                render: function (data, type, row, meta) {
                    return '<span class="bk-tag bk-primary">' + data + '</span>';
                }
            },
            {
                targets: 3,
                data: "mission_require", className: "text-center",
            },
            {
                targets: 4,
                data: "effect_time", className: "text-center",
            },
            {
                targets: 5,
                data: "mission_salary", className: "text-center",
            },
            {
                targets: 6,
                data: "id",
                render: function (data, type, row, meta) {
                    if ( row.belonging_user === '{{ request.user.username }}') {
                        return '---'
                    } else {
                        return '<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="AcceptMissionForm(' + data + ')" title="接受">\n' +
                        '<i class="bk-icon icon-file bk-icon"></i>\n' +
                        '<i class="bk-text">接单</i>\n' +
                        '</a>\n';
                    }
                }
            },
        ]
    });

   setInterval(function () {
       offlineMissionTable.ajax.reload(null, false); // user paging is not reset on reload
   }, 30000);

   function jump_my_mission(){
     window.location.href="{{ SITE_URL }}my_mission/";
    }

   function AcceptMissionForm(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '接单',
            content: '确认接受该订单？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}accept_mission/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            jump_my_mission()
                            offlineMissionTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }

</script>
{% endblock %}

